<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>仪器共享</title>

<meta name="keywords" content="科研仪器，生命科学仪器，环境检测仪器，实验常用设备，分析仪器">

<meta name="description"
	content="中国领先的科研仪器共享平台，让您快速找到各种类型的科学研究仪器。提升闲置仪器利用率，产生更大科研价值。涵盖：生命科学仪器、环境检测仪器、实验常用设备、分析仪器、仪表、物性测试、测量/计量仪器、在线及过程控制仪器。

    ">
<link rel="stylesheet" href="new_css/productDetail.css">
<!--<link rel="stylesheet" href="css/new_style.css">-->

<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">
<script src="new_js/jquery-1.11.3.js"></script>
<link href='calendar/fullcalendar.min.css' rel='stylesheet' />
<link href='calendar/fullcalendar.print.min.css' rel='stylesheet'
	media='print' />
<script src='calendar/moment.min.js'></script>
<script src='calendar/jquery.min.js'></script>
<script src='calendar/fullcalendar.min.js'></script>
<script src='calendar/locale-all.js'></script>
<script src="method/dwy/productDetail5.js"></script>
<script>
    $(document).ready(function(){
    var id = GetQueryString("id")
    notice(id);
    insinfodetail(id)
    timeSolt(id)
    $("#placeAnOrder").click(function(){
	    if($("#useridoflogin").val() != "null"){
	    	if($("#computedPrice").html() != 0){
	    		document.cookie="startTime=" + $("#startDate").val();
	    		document.cookie="endTime=" + $("#endDate").val();
	    		document.cookie="computedPrice=" + $("#computedPrice").html();
	    		document.cookie="timeId=" + $('#timeSlot').val();
				$(location).attr('href', 'lab_order_details8?id='+ id + '');
			}else{
				alert("您选择的价格应该大于0")
			}
		}else{
			alert("请先登录后再预约");
		}
	  })
    })
    function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r != null) return unescape(r[2]);
    return null;
    }
    </script>
<script>
    $(function() {
    $('#front_header .header_wrap .right').hover(function() {
    $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon2.png');
    $('#front_header .header_wrap .right .out').show();
    }, function() {
    $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon1.png');
    $('#front_header .header_wrap .right .out').hide();
    });
    $('#sorts').on('mouseover', 'li', function() {
    $(this).find('span img').attr('src', 'images/icon4.png');
    });
    $('#sorts').on('mouseout', 'li', function() {
    $(this).find('span img').attr('src', 'images/icon5.png');
    });

    $('.mainList .content .left li').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
    });


    //--------
    $(".tab_span1").click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
    $("#tabView1").css("display","block");
    $("#tabView2").css("display","none");
    });


    $(".tab_span2").click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
    $("#tabView2").css("display","block");
    $("#tabView1").css("display","none");
    });


    });
    </script>
<script>
    /*jquery.ready(function(){
    $("#myPage").hide();
    })*/


    </script>

<script>

            /* $(document).ready(function() {
                var initialLocaleCode = 'zh-cn';
				console.log(Server)
				console.log()
                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay,listMonth'
                    },
                    defaultDate: '2018-09-30',
                    locale: initialLocaleCode,
                    buttonIcons: false, // show the prev/next text
                    weekNumbers: true,
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: []
                });

                // build the locale selector's options
                $.each($.fullCalendar.locales, function(localeCode) {
                    $('#locale-selector').append(
                        $('<option/>')
                            .attr('value', localeCode)
                            .prop('selected', localeCode == initialLocaleCode)
                            .text(localeCode)
                    );
                });

                // when the selected option changes, dynamically change the calendar option
                $('#locale-selector').on('change', function() {
                    if (this.value) {
                        $('#calendar').fullCalendar('option', 'locale', this.value);
                    }
                });
            }); */

		</script>
<style>
.fc-time {
	display: none;
}

.fc-day-top .fc-wed .fc-past {
	height: 20px;
}

.header-search-right .search-btn input {
	width: 164px;
	height: 53px !important;
	background: rgba(255, 138, 0, 1);
	color: rgba(255, 255, 255, 1);
	font-size: 20px;
	font-family: MicrosoftYaHei;
	border-radius: 0 !important;
}

.mainList .content .productInfo .right {
	float: left;
	height: 100%;
	width: 554px;
	padding-left: 70px;
	/*overflow: hidden;*/
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 25px;
}

.layui-btn, .layui-inline, img {
	vertical-align: unset;
}

.mainList .content .productInfo {
	/* width: 97%; */
	width: 1167px;
	border: 1px solid #d3d3d3;
	padding: 15px;
	height: 100%;
	padding-bottom: 20px;
	overflow: hidden;
}

.mainList .content .productInfo .left {
	border: none;
	display: flex;
	align-items: center;
}

div#test1 img {
	display: flex;
	justify-content: center;
	vertical-align: middle;
	margin: 25px auto;
	height: 420px;
	width: 410px;
}

.sun_tabView_li_a {
	display: flex;
	justify-content: center;
}

.sun_tabView_li_a a {
	background-color: #ff8a00;
	width: 151px;
	height: 46px;
	line-height: 46px;
	display: block;
	text-align: center;
	color: #fff;
	border-radius: 5px;
}
</style>


<style>
#top {
	background: #eee;
	border-bottom: 1px solid #ddd;
	padding: 0 10px;
	line-height: 40px;
	font-size: 12px;
	width: 500px;
	margin: 0 auto;
	display: none;
}

.fc-toolbar.fc-header-toolbar {
	margin-bottom: 1em;
	background-color: #ff8a00;
	color: #fff;
	padding: 10px 20px;
}

#calendar {
	max-width: 500px;
	margin: 40px auto;
	padding: 0 10px;
}

.fc-content {
	background-color: #ff8a00;
}

.fc-event, .fc-event-dot {
	background-color: #ff8a00;
}

.fc-event {
	position: relative;
	display: block;
	font-size: .85em;
	line-height: 1.3;
	border-radius: 3px;
	border: 1px solid #ff8a00;
}

button.fc-month-button.fc-button.fc-state-default.fc-corner-left.fc-state-active
	{
	display: none;
}

button.fc-agendaWeek-button.fc-button.fc-state-default {
	display: none;
}

button.fc-agendaDay-button.fc-button.fc-state-default {
	display: none;
}

button.fc-listMonth-button.fc-button.fc-state-default.fc-corner-right {
	display: none;
}

.fc-week-number {
	display: none;
}
</style>

</head>
<body style="background:#fff;">

	<%@include file="/header3.jsp"%>

	<div class="announcement">
		<marquee class="noticeText ng-binding" direction="left"
			behavior="alternate" scrollamount="100" scrolldelay="1000" loop="5"
			width="100%" onmouseover="this.stop();" onmouseout="this.start();"
			style="width: 100%;">
			<span style="color:#fff">公告：</span> <span id="noticeContent"></span><span
				id="time1"></span>——<span id="time2">
		</marquee>

		<!--     <p>公告：<span id="noticeContent"></span> <span id="time1"></span>——<span id="time2"></span></p>
 -->
	</div>
	<div class="mainList">
		<div class="bNav">
			您的位置：<a href="index.jsp">首页</a> > <a href="instrumentList11">仪器列表</a> > <span id="name0">全功能紫外-可见-近红外荧光光谱仪</span>
		</div>
		<div class="content">
			<div class='productInfo'>
				<div class="left">
					<div class="layui-carousel" id="test1">
						<img src="images/yiqiPic.png">
					</div>


				</div>
				<div class="right">
					<div class="row row1">
						<span id="name1"></span>
					</div>
					<div class="row row2">
						<span id="name2"></span>
					</div>
					<div class="row row3">
						仪器型号：<span id="model"></span>
					</div>
					<div class="row">
						品牌或厂商：<span id="make"></span>
					</div>
					<div class="row">
						仪器分类：<span id="type">化学分析仪器》电化学仪器》PH技、酸度计</span>
					</div>
					<div class="row">
						应用领域：<span id="all">综合</span>
					</div>

					<div class="row row9 clearfix">
						<!-- onclick="ShowDiv('MyDiv','fade')" -->
						<div class="btn">
							<a href="javascript:void(0);" onclick="ShowDiv('MyDiv','fade')">立即预约</a>
						</div>
						<div class="price">
							价格：<span id="price">
						</div>

					</div>

				</div>


				<div class="userEvaluation">
					<div class='tab'>
						<span class="tab_span1 selected">详情简介</span><span
							class="tab_span2" id="comtent"></span>
					</div>
					<div class="box">
						<div class='tabView sun_tabView ' id="tabView1">
							<!------------------------>


							<ul>
								<li id="detail"></li>
								<li class="sun_tabView_li_a"><a id="download">下载仪器知识</a></li>
							</ul>

							<!------------------------>


							<!------------------------>
						</div>
						<div class='tabView' id="tabView2" style="display: none;">
							<ul id="pingjia">
								<li>
									<div class="fontInfo">
										<div class="left">仪器特别好用，服务态度也很好
											仪器特别好用，服务态度也很好仪器特别好用，服务态度也很好服务态度也很好</div>
										<div class="right">
											一日***记忆<span>（匿名）</span>
										</div>
									</div>
									<div class="pic">
										<img src="images/productDetailPic.png" /> <img
											src="images/productDetailPic.png" />
									</div>
									<div class="replay">
										<div class='left'>
											回复：<span>谢谢您的支持！</span>
										</div>
										<div class='right'>负责人：张三</div>
									</div>
								</li>
								<li>
									<div class="fontInfo">
										<div class="left">仪器特别好用，服务态度也很好
											仪器特别好用，服务态度也很好仪器特别好用，服务态度也很好服务态度也很好</div>
										<div class="right">
											一日***记忆<span>（匿名）</span>
										</div>
									</div>
									<div class="pic">
										<img src="images/productDetailPic.png" /> <img
											src="images/productDetailPic.png" />
									</div>
									<div class="replay">
										<div class='left'>
											回复：<span>谢谢您的支持！</span>
										</div>
										<div class='right'>负责人：张三</div>
									</div>
								</li>
								<li>
									<div class="fontInfo">
										<div class="left">仪器特别好用，服务态度也很好
											仪器特别好用，服务态度也很好仪器特别好用，服务态度也很好服务态度也很好</div>
										<div class="right">
											一日***记忆<span>（匿名）</span>
										</div>
									</div>
									<div class="pic">
										<img src="images/productDetailPic.png" /> <img
											src="images/productDetailPic.png" />
									</div>
									<div class="replay">
										<div class='left'>
											回复：<span>谢谢您的支持！</span>
										</div>
										<div class='right'>负责人：张三</div>
									</div>
								</li>
							</ul>
						</div>

					</div>
				</div>

				<!--page-->
				<div class="myPage clearfix">
					<ul class="page" maxshowpageitem="5" pagelistcount="10" id="page"></ul>
				</div>
			</div>

		</div>
		<!--弹出层时背景层DIV-->
		<div id="fade" class="black_overlay"></div>
		<div id="MyDiv" class="white_content">
			<div id="rightTimeSele">

				<div id='calendar'></div>
			</div>

			<div id="leftTimeSele">


				<div class="title-tan">
					<div class="xix">
						<p>请设置预约时间</p>
					</div>
					<!-- <div class="close" style="" onclick="CloseDiv('MyDiv','fade')">X</div> -->
				</div>
				<div class="content-tan">
					<ul>
						<li><label>单价：</label><span id="choosePrice">300元/时</span></li>
						<!-- <li>
					<label style="width: 400px; color: #ccc;">请设置预约时间</label>
				</li> -->
						<li><label>预约日期：</label> <input type="date" id="startDate"
							onchange="dateChange()">&nbsp;至&nbsp;<input id="endDate"
							onchange="dateChange()" type="date"></li>
						<li><label>详细时间：</label> <select id="timeSlot"
							style="width: 160px" onchange="dateChange()">
								<option>qq</option>
						</select> <!-- <a>至</a>
					<select style="width: 160px">
						<option>qq</option>
					</select> --> <!-- <input type="date">&nbsp;至&nbsp;<input type="date"> -->
						</li>
						<li id="deteErrorHint"
							style="display:none;font-size:18px;color:red;"><span
							style="">所选时间不在超出或不在设置的时间段内</span></li>
						<li><label>预计费用：</label><span>¥ </span><span
							id='computedPrice'>0</span><span>元</span></li>
					</ul>
				</div>
				<div class="btn-tan">
					<a id="placeAnOrder">确定</a> <a class="btn-a-spec"
						onclick="CloseDiv('MyDiv','fade')">取消</a>
				</div>
			</div>




		</div>
	</div>
	<style>
footer {
	margin-top: 20px;
}
</style>
	<!--footer-->
	<%@include file="/footer.jsp"%>
	<script src="js/common.js"></script>
	<script src="js/layui/layui.js"></script>
	<script>
    layui.use('carousel', function(){
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
    });
    });
    </script>
	<script>
    $(function () {
    $("td").click(function () { //td点击事件；
    var val = $(this).text();
    $(this).toggleClass("className");
    $(this).siblings().removeClass("className");

    //attr("id") //定义val值为点击的此td的id值；
    // alert(val);
    })
    })
    </script>




	<!--弹出框-->
	<style>
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #666;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .70;
	filter: alpha(opacity = 70);
}

.white_content {
	position: absolute;
	top: 50%;
	left: 13%;
	/*  width: 59%; */
	height: 569px;
	border: 1px solid #ccc;
	background-color: white;
	z-index: 1002;
	overflow: hidden;
}

.title-tan {
	width: 600px;
	height: 46px;
	line-height: 7px;
	border-bottom: 1px solid #CCCCCC;
}

.xix {
	text-align: right;
	width: 711px;
	height: 46px;
	line-height: 46px;
	float: left;
	display: flex;
	justify-content: center;
}

.content-tan {
	margin-top: 40px;
	margin-left: 30px;
}

.content-tan li span {
	color: #FF8A00;
	font-size: 24px;
}

.content-tan label {
	width: 90px;
	display: inline-block;
	font-size: 18px;
	line-height: 64px;
}

.title-tan p {
	width: 300px;
	display: inline-block;
	text-align: center;
	display: flex;
	align-items: center;
}

.close {
	float: right;
	width: 50px;
	height: 45px;
	color: #ccc;
	line-height: 50px;
	cursor: pointer
}

.btn-tan {
	text-align: center;
	margin: 0 auto;
	margin-top: 30px;
}

.btn-tan a {
	width: 152px;
	height: 45px;
	background: rgba(255, 138, 0, 1);
	border-radius: 5px;
	display: inline-block;
	text-align: center;
	line-height: 45px;
	color: #ffffff;
	margin-right: 20px;
}

.btn-tan .btn-a-spec {
	width: 150px;
	height: 43px;
	background: #ffffff;
	border: 1px solid #FF8A00;
	border-radius: 5px;
	display: inline-block;
	text-align: center;
	line-height: 45px;
	color: #FF8A00;
}

#leftTimeSele {
	width: 500px;
	float: left;
	margin-left: 20px;
}

#rightTimeSele {
	float: left;
}
</style>
	<script>
    $(document).ready(function(){
		$(".tab_span1").ready(function(){
		$(".myPage").hide();
		})
    });

    $(document).ready(function(){
			$(".tab_span1").click(function(){
			$(".myPage").hide();
    	});
    $(".tab_span2").click(function(){
			$(".myPage").show();
			}
    	);
    });
	
    </script>
	<script type="text/javascript">
        //弹出隐藏层
        function ShowDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'block';
            document.getElementById(bg_div).style.display = 'block';
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
            $("#" + bg_div).height($(document).height());
        };

        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        };
	</script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#MyDiv').hide();
	})
		
	</script>
</body>
<style>
.myPage {
	margin: 0 auto;
	width: 480px;
	height: 80px;
	font-size: 12px;
	float: right;
}

.mainList .content .userEvaluation {
	clear: both !important;
}
</style>
</html>
